/* * 港到港运单 空运 */
<template>
  <div row-style="height:20px">
    <el-row type="flex">
      <el-card shadow="never" style="height: 100%; width: 40%">
        <el-form
          :model="waybillInfo"
          ref="waybillInfo"
          size="mini"
          :rules="rules"
        >
          <el-form-item
            label="客户："
            label-width="30%"
            v-model="waybillInfo.customerId"
            prop="customerId"
          >
            <template>
              <el-select
                style="width: 90%"
                v-model="waybillInfo.customerId"
                filterable
                remote
                @change="changeCustomer"
                reserve-keyword
                placeholder="请输入关键词"
                :remote-method="remoteMethod"
                :loading="loading"
              >
                <el-option
                  v-for="(item, value) in customerIds"
                  :key="value"
                  :label="item"
                  :value="value"
                >
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="目的国家：" label-width="30%" prop="countryId">
            <template>
              <el-select
                style="width: 90%"
                v-model="waybillInfo.countryId"
                filterable
                remote
                reserve-keyword
                placeholder="请输入关键词"
                :loading="loading"
                size="mini"
              >
                <el-option
                  v-for="(item, value) of countryIds"
                  :key="value"
                  :label="item.label"
                  :value="parseInt(item.value)"
                >
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="起运港：" label-width="30%" prop="shipmentPort">
            <template>
              <el-select
                style="width: 90%"
                v-model="waybillInfo.shipmentPort"
                filterable
                remote
                reserve-keyword
                placeholder="请输入关键词"
                :loading="loading"
                size="mini"
              >
                <el-option
                  v-for="(item, value) in configPortMap"
                  :key="value"
                  :label="item"
                  :value="parseInt(value)"
                >
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item
            label="目的港："
            label-width="30%"
            prop="destinationPort"
          >
            <template>
              <el-select
                style="width: 90%"
                v-model="waybillInfo.destinationPort"
                filterable
                remote
                reserve-keyword
                placeholder="请输入关键词"
                :loading="loading"
                size="mini"
              >
                <el-option
                  v-for="(item, value) in configPortMap"
                  :key="value"
                  :label="item"
                  :value="parseInt(value)"
                >
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item
            label="预计离港时间："
            label-width="30%"
            prop="estimatedDepartureTime"
          >
            <el-date-picker
              placeholder="预计离港时间"
              suffix-icon="el-icon-date"
              value-format="yyyy-MM-dd"
              v-model="waybillInfo.estimatedDepartureTime"
              style="width: 90%"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            label="预计到港时间："
            label-width="30%"
            prop="estimatedArrivalTime"
          >
            <el-date-picker
              placeholder="预计到港时间"
              suffix-icon="el-icon-date"
              value-format="yyyy-MM-dd"
              v-model="waybillInfo.estimatedArrivalTime"
              style="width: 90%"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            label="船公司："
            label-width="30%"
            prop="shipOrAirlineCompany"
          >
            <template>
              <el-select
                style="width: 90%"
                v-model="waybillInfo.shipOrAirlineCompany"
                filterable
                remote
                reserve-keyword
                placeholder="请输入关键词"
                :loading="loading"
                size="mini"
              >
                <el-option
                  v-for="(item, value) in shipownerIds"
                  :key="value"
                  :label="item"
                  :value="parseInt(value)"
                >
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="物流方法：" label-width="30%" prop="shippingWay">
            <el-select
              size="mini"
              v-model="waybillInfo.shippingWay"
              style="width: 90%"
            >
              <el-option value="LCL">LCL</el-option>
              <el-option value="FCL">FCL</el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="重量："
            label-width="30%"
            prop="customerActualWeight"
          >
            <el-input
              v-model.number="waybillInfo.customerActualWeight"
              type="number"
              placeholder="请输入重量"
              autocomplete="off"
              style="width: 90%"
              size="mini"
            ></el-input>
          </el-form-item>
          <el-form-item label="体积：" label-width="30%" prop="customerVolume">
            <el-input
              v-model.number="waybillInfo.customerVolume"
              type="number"
              placeholder="请输入体积"
              autocomplete="off"
              style="width: 90%"
              size="mini"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="计费重："
            label-width="30%"
            prop="customerChargedWeight"
          >
            <el-input
              v-model.number="waybillInfo.customerChargedWeight"
              type="number"
              placeholder="请输入计费重"
              autocomplete="off"
              style="width: 90%"
              size="mini"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="件数："
            label-width="30%"
            prop="customerTotalPackages"
          >
            <el-input
              v-model.number="waybillInfo.customerTotalPackages"
              type="number"
              placeholder="请输入件数"
              autocomplete="off"
              style="width: 90%"
              size="mini"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="是否报关："
            label-width="30%"
            prop="isCustomerDeclaration"
          >
            <el-radio v-model="waybillInfo.isCustomerDeclaration" label="1"
              >是</el-radio
            >
            <el-radio v-model="waybillInfo.isCustomerDeclaration" label="0"
              >否</el-radio
            >
          </el-form-item>
          <el-form-item 
            prop="boxCount" 
            label="柜量"  
            label-width="30%"
            style="width: 90%" 
            v-if="waybillInfo.shippingWay === 'FCL'" 
          >
            <el-input
              v-model.number="waybillInfo.boxCount"
              min="0"
              clearable
              placeholder="请输入柜量"
            />
          </el-form-item>

          <el-form-item 
            prop="boxType" 
            label="柜型" 
            label-width="30%"  
            v-if="waybillInfo.shippingWay === 'FCL'"
          >
            <el-select
              v-model="waybillInfo.boxType"
              filterable
              style="width: 90%"
              placeholder="请选择"
            >
              <el-option
                v-for="item in cabinetOptions"
                :key="item"
                :label="item"
                :value="item"
              />
              </el-select>
          </el-form-item>
           
          <el-form-item prop="isBuyInsurance" label="是否购买保险：" label-width="30%">
         
              <el-radio
                v-model="waybillInfo.isBuyInsurance"
                :label="parseInt(0)"
                class="margin-left"
                >否</el-radio
              >
              <el-radio
                v-model="waybillInfo.isBuyInsurance"
                :label="parseInt(1)"
                >是</el-radio
              >
              <el-tooltip class="item" effect="light" placement="right">
                <div slot="content">
                  a 购买为是:</br></br>1、甲方按照产品采购货值的 0.3%向乙方支付保费；
                  </br>2、按照系统下单时提供的产品采购货值赔偿；
                  </br>3、无免赔，即按照产品采购货值的 100%赔偿，
                  理赔时需提供采购发票，哪个低按哪个来核算赔偿金额
                  </br>4、赔偿上限：海运整柜RMB200 万/柜
                  </br></br> b 购买为否</br>
                   1、不填默认不买保险
                  2、如填写货值，则九方买保险，按下单货值购买保险，只赔偿货值90%，理赔时需提供采购发票，哪个低按哪个来核算赔偿金额，赔偿上限为RMB50
                  万/柜
                </div>
                <i class="el-icon-question icon-question text-yellow" />
              </el-tooltip>
            </el-form-item>

            <div v-if="buyInsuranceFlag" class="text-gray margin-bottom-sm " style="color:red;width: 90%;margin-left:100px;">
              1、不填默认不买保险</br>
              2、如填写货值，则九方买保险，按下单货值购买保险，只赔偿货值90%，</br>理赔时需提供采购发票，哪个低按哪个来核算赔偿金额，赔偿上限为RMB50
            </div>
            <div v-else class="text-gray margin-bottom-sm " style="color:red;width: 90%;margin-left:100px;">
              1、甲方按照产品采购货值的 0.3%向乙方支付保费；</br>
              2、按照系统下单时提供的产品采购货值赔偿；</br>
              3、无免赔，即按照产品采购货值的 100%赔偿，</br>理赔时需提供采购发票，哪个低按哪个来核算赔偿金额</br>
              4、赔偿上限：海运整柜RMB200 万/柜
            </div>

            <el-form-item prop="totalPurchasingPrice" label-width="30%" >
              <div slot="label">采购总价(RMB)：</div>
              <el-input
                v-model.number="waybillInfo.totalPurchasingPrice"
                placeholder="购买保险必填"
                style="width: 90%"
                autocomplete="off"
              ></el-input>
            </el-form-item>

          <el-form-item label="品名：" label-width="30%" prop="nameDescription">
            <el-input
              type="textarea"
              :rows="5"
              v-model="waybillInfo.nameDescription"
              autocomplete="off"
              style="width: 90%"
              size="mini"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-card>
      <el-col>
        <el-card shadow="never" style="height: 100%; width: 100%">
          <el-form
            :model="waybillInfo"
            ref="waybillInfo"
            size="mini"
            :rules="rules"
          >
            <div style="width: 50%; float: left">
              <el-form-item
                label="自有VAT和EORI："
                label-width="150px"
                prop="isVatAndEori"
              >
                <el-select
                  size="mini"
                  v-model="waybillInfo.isVatAndEori"
                  style="width: 75%"
                >
                  <el-option
                    v-for="(k, v) in isNotOptions"
                    :key="k"
                    :label="isNotOptions[v]"
                    :value="parseInt(v)"
                  ></el-option>
                  <!-- <el-option value="0">否</el-option>
                  <el-option value="1">是</el-option> -->
                </el-select>
              </el-form-item>
              <div class="minheight" :class="{ maxheight: flag }">
                <el-form-item
                  label="选择进口商："
                  label-width="150px"
                  prop="customerImporterId"
                  v-if="waybillInfo.isVatAndEori === 1"
                >
                  <el-select
                    size="mini"
                    v-model="waybillInfo.customerImporterId"
                    style="width: 60%"
                  >
                    <el-option
                      v-for="(item, value) in customerImporterIds"
                      :key="value"
                      :label="item"
                      :value="value"
                    >
                    </el-option>
                  </el-select>
                  <el-link
                    :underline="false"
                    @click="serviceShow"
                    type="primary"
                    >新增进口商</el-link
                  >
                </el-form-item>
                <el-row><el-col> &nbsp;</el-col></el-row
                ><el-row><el-col> &nbsp;</el-col></el-row
                ><el-row><el-col> &nbsp;</el-col></el-row
                ><el-row><el-col> &nbsp;</el-col></el-row
                ><el-row><el-col> &nbsp;</el-col></el-row
                ><el-row><el-col> &nbsp;</el-col></el-row
                ><el-row><el-col> &nbsp;</el-col></el-row
                ><el-row><el-col> &nbsp;</el-col></el-row>
                <el-row><el-col> &nbsp;</el-col></el-row
                ><el-row><el-col> &nbsp;</el-col></el-row
                ><el-row><el-col> &nbsp;</el-col></el-row
                ><el-row><el-col> &nbsp;</el-col></el-row
                ><el-row><el-col> &nbsp;</el-col></el-row
                ><el-row><el-col> &nbsp;</el-col></el-row
                ><el-row><el-col> &nbsp;</el-col></el-row
                ><el-row><el-col> &nbsp;</el-col></el-row>
              </div>
              <div class="minheight" :class="{ maxheight: importerShow }">
                <el-form-item
                  label="进口商公司名："
                  label-width="150px"
                  prop="importerCompanyName"
                >
                  <el-input
                    v-model="waybillInfo.importerCompanyName"
                    autocomplete="off"
                    style="width: 50%"
                    size="mini"
                  ></el-input>
                  <el-link
                    :underline="false"
                    @click="importerHide"
                    type="primary"
                    >返回</el-link
                  >
                </el-form-item>
                <el-form-item
                  label="进口商联系人："
                  label-width="150px"
                  prop="importerLinkMan"
                >
                  <el-input
                    v-model="waybillInfo.importerLinkMan"
                    autocomplete="off"
                    style="width: 75%"
                    size="mini"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="进口商电话："
                  label-width="150px"
                  prop="importerPhone"
                >
                  <el-input
                    v-model="waybillInfo.importerPhone"
                    autocomplete="off"
                    style="width: 75%"
                    size="mini"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="进口商邮编："
                  label-width="150px"
                  prop="importerZipCode"
                >
                  <el-input
                    v-model="waybillInfo.importerZipCode"
                    autocomplete="off"
                    style="width: 75%"
                    size="mini"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="进口商VAT："
                  label-width="150px"
                  prop="vat"
                >
                  <el-input
                    v-model="waybillInfo.vat"
                    autocomplete="off"
                    style="width: 75%"
                    size="mini"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="进口商EORI："
                  label-width="150px"
                  prop="eori"
                >
                  <el-input
                    v-model="waybillInfo.eori"
                    autocomplete="off"
                    style="width: 75%"
                    size="mini"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="进口商地址："
                  label-width="150px"
                  prop="importerAddress"
                >
                  <el-input
                    v-model="waybillInfo.importerAddress"
                    autocomplete="off"
                    style="width: 75%"
                    size="mini"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="minheight" :class="{ maxheight: customerPickup }">
                <el-form
                  :model="customerPickupAddress"
                  ref="customerPickupAddress"
                  size="mini"
                  :rules="rules"
                >
                  <el-form-item
                    label="所在地区："
                    label-width="150px"
                    prop="stateList"
                  >
                    <div class="block">
                      <el-cascader
                        v-model="stateList"
                        :options="stateIds"
                        @change="handleChange"
                      ></el-cascader>
                    </div>
                  </el-form-item>
                  <el-form-item label="" label-width="150px" prop="address">
                    <el-input
                      placeholder="详细地址"
                      v-model="customerPickupAddress.address"
                      autocomplete="off"
                      style="width: 150%"
                      size="mini"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="联系人："
                    label-width="150px"
                    prop="linkMan"
                  >
                    <el-input
                      v-model="customerPickupAddress.linkMan"
                      autocomplete="off"
                      style="width: 150%"
                      size="mini"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="手机号码："
                    label-width="150px"
                    prop="contactWay"
                  >
                    <el-input
                      v-model="customerPickupAddress.contactWay"
                      autocomplete="off"
                      style="width: 150%"
                      size="mini"
                    ></el-input>
                  </el-form-item>
                  <el-row>
                    <el-col :span="14">&nbsp;</el-col>
                    <el-button
                      size="mini"
                      type="primary"
                      @click="saveCustomerPickupAddress"
                      style="margin-top: 20px"
                      >保存提货人信息</el-button
                    >
                    <el-button
                      size="mini"
                      type="primary"
                      @click="customerPickupHide"
                      style="margin-top: 20px"
                      >取消编辑</el-button
                    >
                    <el-col>&nbsp;</el-col>
                  </el-row>
                </el-form>
              </div>
              <div class="minheight" :class="{ maxheight: pickUpGoods }">
                <el-form-item
                  label="提货地址："
                  label-width="150px"
                  prop="pickUpGoodsAddres"
                >
                  <div class="padding-lr">
                    <div v-for="(item, index) in addressesData" :key="index">
                      <div v-for="(v, k) in item" :key="k">
                        <div
                          v-if="
                            showMoreAddress ||
                              (!showMoreAddress && v.defaultValue)
                          "
                          class="address-item padding-lr margin-bottom-sm text-sm"
                          :class="{ 'address-active': v.defaultValue }"
                          @click="selectAddress(index, k)"
                        >
                          <el-row>
                            <el-col :span="3">
                              {{ v.linkMan }}
                            </el-col>
                            <el-col :span="14">
                              {{ v.address }}
                            </el-col>
                            <el-col :span="7">
                              {{ v.contactWay }}
                            </el-col>
                          </el-row>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="text-sm"
                    v-if="showAddress"
                    @click="showMoreAddress = !showMoreAddress"
                  >
                    <span v-if="showMoreAddress">
                      收起地址
                      <i class="el-icon-arrow-up" />
                    </span>
                    <span v-else>
                      更多地址
                      <i class="el-icon-arrow-down" />
                    </span>
                  </div>
                </el-form-item>
                <el-form-item
                  label="预计提货时间："
                  label-width="150px"
                  prop="pickUpGoodsAntipateTime"
                >
                  <el-date-picker
                    placeholder="预计提货时间"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    v-model="waybillInfo.pickUpGoodsAntipateTime"
                    style="width: 50%"
                  ></el-date-picker>
                </el-form-item>
                <el-link
                  :underline="false"
                  @click="pickUpGoodsShow"
                  type="danger"
                  >不需要提货？点击这里</el-link
                >
                <el-button
                  size="mini"
                  type="primary"
                  @click="copyWaybillByNo"
                  style="margin-top: 20px;float:left;margin-left:50px;"
                  >复制运单</el-button
                >
              </div>
              <div class="minheight" :class="{ maxheight: estimatedDeli }">
                <el-form-item
                  label="预计送货时间："
                  label-width="150px"
                  prop="estimatedDeliveryTime"
                >
                  <el-date-picker
                    placeholder="预计送货时间"
                    suffix-icon="el-icon-date"
                    v-model="waybillInfo.estimatedDeliveryTime"
                    style="width: 50%"
                  ></el-date-picker>
                </el-form-item>
                <el-link
                  :underline="false"
                  @click="estimatedDeliShow"
                  type="danger"
                  >需要提货?点击这里返回!</el-link
                >
              </div>
            </div>
            <div style="width: 50%; float: right">
              <el-form-item label="Notify Party：" label-width="150px">
                <el-input
                  type="textarea"
                  :rows="6"
                  v-model="waybillInfo.masterNumberNotifier"
                  autocomplete="off"
                  style="width: 90%"
                  size="mini"
                ></el-input>
              </el-form-item>
              <el-form-item label="备注：" label-width="150px">
                <el-input
                  type="textarea"
                  :rows="6"
                  v-model="waybillInfo.customerRemark"
                  autocomplete="off"
                  style="width: 90%"
                  size="mini"
                ></el-input>
              </el-form-item>
              <el-link
                :underline="false"
                @click="customerPickupShow"
                type="danger"
                >新增收货地址</el-link
              >
            </div>
            
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="margin-top">
      <el-card shadow="never">
        <div slot="header" class="clearfix relative">
          <span class="title-icon">应收</span>
        </div>
        <el-table size="mini" :data="receivableData" style="width: 100%">
          <el-table-column
            v-for="item in tabColumns"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
          >
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.serCusId"
                v-if="item.prop === 'serCusId'"
                filterable
                remote
                clearable
                reserve-keyword
                placeholder="请输入关键词"
                :remote-method="remoteMethod"
                :loading="loading"
                size="mini"
              >
                <el-option
                  v-for="(item, value) in customerIds"
                  :key="value"
                  :label="item"
                  :value="parseInt(value)"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="scope.row.costName"
                v-if="item.prop === 'costName'"
                clearable
                filterable
                remote
                reserve-keyword
                placeholder="请输入关键词"
                :loading="loading"
                size="mini"
              >
                <el-option
                  v-for="(item, value) in costNameSource"
                  :key="value"
                  :label="item"
                  :value="parseInt(value)"
                >
                </el-option>
              </el-select>
              <el-input
                v-model="scope.row.count"
                clearable
                size="mini"
                @change="changeData(scope)"
                v-if="item.prop === 'count'"
              />
              <el-input
                v-model="scope.row.unitPrice"
                clearable
                size="mini"
                @change="changeData(scope)"
                v-if="item.prop === 'unitPrice'"
              />
              <el-select
                v-model="scope.row.currency"
                v-if="item.prop === 'currency'"
                clearable
                placeholder="请选择币种"
                size="mini"
              >
                <el-option
                  v-for="(item, value) in currencySource"
                  :key="value"
                  :label="item"
                  :value="value"
                >
                </el-option>
              </el-select>
              <el-date-picker
                suffix-icon="el-icon-date"
                clearable
                v-model="scope.row.accountDate"
                v-if="item.prop === 'accountDate'"
                value-format="yyyy-MM-dd"
                style="width:100%"
                size="mini"
              ></el-date-picker>
              <el-input
                v-model="scope.row.remark"
                size="mini"
                clearable
                v-if="item.prop === 'remark'"
              />
              <el-input
                v-model="scope.row.totalCost"
                size="mini"
                disabled
                clearable
                v-if="item.prop === 'totalCost'"
              />
              <el-input
                v-model="scope.row.remain"
                size="mini"
                disabled
                clearable
                v-if="item.prop === 'remain'"
              />
              <el-input
                v-model="scope.row.lastOperator"
                size="mini"
                clearable
                disabled
                v-if="item.prop === 'lastOperator'"
              />
              <el-input
                v-model="scope.row.creatDate"
                size="mini"
                clearable
                disabled
                v-if="item.prop === 'creatDate'"
              />
            </template>
          </el-table-column>
          <el-table-column>
            <template slot="header" slot-scope="scope">
              <el-link
                type="primary"
                icon="el-icon-plus"
                :underline="false"
                @click="editReceive"
              ></el-link>
            </template>
            <template slot-scope="scope">
              <el-link
                type="primary"
                icon="el-icon-plus"
                @click="editReceiveBySale(scope)"
                :underline="false"
              ></el-link>
              <el-link
                type="danger"
                icon="el-icon-minus"
                @click="delData(scope)"
                :underline="false"
              ></el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-row>
    <el-row>
      <el-col :span="10">&nbsp;</el-col>
      <el-col :span="2">
        <el-button size="mini" type="primary" style="margin-top: 20px"
          >返回</el-button
        >
      </el-col>
      <el-col :span="2">
        <el-button
          size="mini"
          type="primary"
          @click="waybillInfoSave()"
          style="margin-top: 20px"
          >保存</el-button
        >
      </el-col>
    </el-row>
    <!-- 新增应收-->
    <el-dialog title="新增" :visible.sync="customerReceivables" width="40%">
      <el-form :model="receivableList" :rules="rules" ref="receivableList">
        <el-form-item label="公司" label-width="25%" prop="serCusId">
          <template>
            <el-select
              style="width: 60%"
              v-model="receivableList.serCusId"
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="remoteMethod"
              :loading="loading"
              size="mini"
            >
              <el-option
                v-for="(item, value) in customerIds"
                :key="value"
                :label="item"
                :value="parseInt(value)"
              >
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="费用名称" label-width="25%" prop="costName">
          <el-select
            style="width: 60%"
            v-model="receivableList.costName"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :loading="loading"
            size="mini"
          >
            <el-option
              v-for="(item, value) in costNameSource"
              :key="value"
              :label="item"
              :value="parseInt(value)"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量" label-width="25%" prop="count">
          <el-input
            v-model="receivableList.count"
            autocomplete="off"
            style="width: 60%"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item label="单价" label-width="25%" prop="unitPrice">
          <el-input
            v-model="receivableList.unitPrice"
            autocomplete="off"
            style="width: 60%"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item label="币种" label-width="25%" prop="currency">
          <el-select
            v-model="receivableList.currency"
            placeholder="币种"
            style="width: 60%"
            size="mini"
          >
            <el-option
              v-for="(item, value) in currencySource"
              :key="value"
              :label="item"
              :value="value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="账单类型" label-width="25%">
          <el-select
            v-model="waybillInfo.receivableList.billType"
            placeholder="账单类型"
            style="width: 60%"
            size="mini"
          >
            <el-option
              v-for="(item, value) in billTypes"
              :key="value"
              :label="item"
              :value="value"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="费用日期" label-width="25%" prop="accountDate">
          <el-date-picker
            placeholder="费用日期"
            suffix-icon="el-icon-date"
            v-model="receivableList.accountDate"
            value-format="yyyy-MM-dd"
            style="width: 60%"
            size="mini"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-form-item label="备注" label-width="25%" prop="remark">
            <el-input
              v-model="receivableList.remark"
              autocomplete="off"
              style="width: 60%"
              size="mini"
            ></el-input>
          </el-form-item>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="customerReceivables = false" size="mini"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="balanceDetailSave('receivableList')"
          size="mini"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="复制运单"
      :visible.sync="waybillDialogVisible"
      width="30%"
    >
      <el-row>
        <el-col :span="4"><span style="font-size:20px;">运单号：</span></el-col>
        <el-col :span="20"><el-input v-model="copyWaybillNo"/></el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="waybillDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="copyWaybillNoConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SearchBox from "./components/SearchBox";
import TableModul from "./components/TableModul";
import { ajax } from "@/store/yg/common/utils";
import { getPcas } from "@/utils/city-pcas.js";

export default {
  components: {
    SearchBox,
    TableModul
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    $route: "fetchData",
    "waybillInfo.isBuyInsurance": {
      handler(val, oldVal) {
        console.log("provinceId :>> ", val);
        console.log("provinceId oldVal :>> ", oldVal);
        if (val && val == 1) {
          this.buyInsuranceFlag = false;
        }else{
          this.buyInsuranceFlag = true ;
        }
      },
      deep: true,
      immediate: true
    },
  },
  data() {
    return {
      waybillDialogVisible: false,
      copyWaybillNo: "",
      showMoreAddress: false,
      showAddress: false,
      buyInsuranceFlag:false,
      tabColumns: [
        { prop: "serCusId", label: "公司" },
        { prop: "costName", label: "费用名称" },
        { prop: "unitPrice", label: "单价" },
        { prop: "count", label: "数量" },
        { prop: "currency", label: "币种" },
        { prop: "totalCost", label: "总额" },
        { prop: "remain", label: "余额" },
        { prop: "lastOperator", label: "修改人" },
        { prop: "creatDate", label: "创建时间" },
        { prop: "accountDate", label: "费用日期" },
        { prop: "remark", label: "备注" }
      ],
      rules: {
        customerId: [
          { required: true, message: "请输入客户", trigger: "blur" }
        ],
        serCusId: [{ required: true, message: "请输入公司", trigger: "blur" }],
        countryId: [
          { required: true, message: "请选择国家", trigger: "change" }
        ],
        shipmentPort: [
          { required: true, message: "请选择起运港", trigger: "change" }
        ],
        destinationPort: [
          { required: true, message: "请选择目的港", trigger: "change" }
        ],
        estimatedDepartureTime: [
          { required: true, message: "请选择预计离岗时间", trigger: "change" }
        ],
        estimatedArrivalTime: [
          { required: true, message: "请选择预计到岗时间", trigger: "change" }
        ],
        shipOrAirlineCompany: [
          { required: true, message: "请选择船公司", trigger: "change" }
        ],
        shippingWay: [
          { required: true, message: "请选择物流方法", trigger: "change" }
        ],
        customerActualWeight: [
          {
            required: true,
            message: "请输入正实数,最多三位小数",
            trigger: "blur"
          },
          {
            pattern: /(^[0-9]([0-9]+)?(\.[0-9]{1,3})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: "请输入正实数,最多三位小数"
          }
        ],
         cabinetNumber: [
          { required: true, message: '请填写正整数', trigger: 'blur' },
          { type: 'number', message: '必须为数字值' }
        ],
        boxType: [
          { required: true, message: '请选择柜型', trigger: 'change' }
        ],
        customerVolume: [
          {
            required: true,
            message: "请输入正实数,最多三位小数",
            trigger: "blur"
          },
          {
            pattern: /(^[0-9]([0-9]+)?(\.[0-9]{1,3})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: "请输入正实数,最多三位小数"
          }
        ],
        customerChargedWeight: [
          {
            required: true,
            message: "请输入正实数,最多三位小数",
            trigger: "blur"
          },
          {
            pattern: /(^[0-9]([0-9]+)?(\.[0-9]{1,3})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: "请输入正实数,最多三位小数"
          }
        ],
        customerTotalPackages: [
          { required: true, message: "请填写正实数", trigger: "blur" }
        ],
        isCustomerDeclaration: [
          { required: true, message: "请选择是否报关", trigger: "change" }
        ],
        nameDescription: [
          { required: true, message: "请填写品名", trigger: "blur" }
        ],
        //进口商信息
        isVatAndEori: [
          {
            required: true,
            message: "请填选择自有VAT和EORI",
            trigger: "change"
          }
        ],
        customerImporterId: [
          { required: true, message: "请选择进口商", trigger: "change" }
        ],
        importerCompanyName: [
          { required: true, message: "请填写进口商公司名", trigger: "blur" }
        ],
        importerZipCode: [
          { required: true, message: "请填写进口商邮编", trigger: "blur" }
        ],
        vat: [{ required: true, message: "请填写进口商VAT", trigger: "blur" }],
        eori: [
          { required: true, message: "请填写进口商EORI", trigger: "blur" }
        ],

        importerAddress: [
          { required: true, message: "请填写进口商地址", trigger: "blur" }
        ],
        //提货人信息
        stateList: [
          { required: true, message: "请选择所在地区", trigger: "change" }
        ],
        linkMan: [{ required: true, message: "请填写联系人", trigger: "blur" }],
        contactWay: [
          { required: true, message: "请填写手机号码", trigger: "blur" }
        ],
        //提货信息
        pickUpGoodsAntipateTime: [
          { required: true, message: "请选择预计提货时间", trigger: "blur" }
        ],
        pickUpGoodsAddres: [
          { required: true, message: "请填写提货地址", trigger: "blur" }
        ],
        // 应收信息
        costName: [
          { required: true, message: "请选择费用名称", trigger: "change" }
        ],
        count: [{ required: true, message: "请填写数量", trigger: "blur" }],
        unitPrice: [{ required: true, message: "请填写单价", trigger: "blur" }],
        currency: [{ required: true, message: "请填写币种", trigger: "blur" }],
        accountDate: [
          { required: true, message: "请选择费用日期", trigger: "change" }
        ]
      },
      customerReceivables: false, //应收
      flag: false, //隐藏
      flags: false, //显示
      importerShow: true, //进口商
      pickUpGoods: false, //是是否需要提货
      estimatedDeli: true, //预计送货时间
      customerPickup: true, //新增收获地址
      customerIds: [], //客户
      countryIds: [], //国家
      airlineIds: [], //航空公司
      shipownerIds: [], //船公司
      configPortMap: [], //港口信息
      shippingWayIds: [], //物流方法
      customerImporterIds: [], //选择进口商
      stateIds: [], //省份
      cityIds: [], //城市
      areaIds: [], //区县
      loading: false, //客户远程搜索
      waybillInfo: {
        customerId: "",
        countryId: "",
        shipmentPort: "", //起运港
        destinationPort: "", //目的港
        estimatedDepartureTime: "",
        estimatedArrivalTime: "",
        shipOrAirlineCompany: "", //船公司/航空公司
        shippingWay: "", //物流方法
        boxCount:"",//柜量
        boxType:"",//柜型
        customerActualWeight: "",
        customerVolume: "",
        customerChargedWeight: "",
        customerTotalPackages: "",
        isCustomerDeclaration: "", //是否报关
        examineDeclareNameCn: "", //品名
        isVatAndEori: 0, //自有VAT和EORI：0.否 1.是
        customerImporterId: "", //进口商ID
        importerCompanyName: "", //进口商公司名
        importerLinkMan: "", //进口商联系人
        importerPhone: "", //进口商电话
        importerZipCode: "", //进口商邮编
        vat: "", //进口商VAT
        eori: "", //进口商EORI
        importerAddress: "", //进口商地址
        pickUpGoodsAddres: "", //提货地址
        pickUpGoodsAntipateTime: "", //提货预约时间
        estimatedDeliveryTime: "", //预计送货时间
        status: 20, // 提交为交寄
        receivableList: [
          {
            //客户应收表单
            waybillNo: "",
            waybillId: "",
            serCusId: "",
            saleId: "", //销售id
            billType: "",
            costName: "",
            count: "",
            unitPrice: "",
            currency: "",
            totalCost: "",
            remain: "",
            accountDate: "",
            remark: ""
          }
        ] //应收list
      },
      stateList: [], //存储地区信息
      customerPickupAddress: {
        id: "",
        //客户提货地址
        state: "", //省
        city: "", //城市
        area: "", //区
        street: "", //街道
        address: "", //详细地址
        linkMan: "", //联系人
        contactWay: "", //联系方式
        defaultValue: 0 //默认值
      },
      receivableList: {
        // id: "",
        waybillNo: "",
        waybillId: "",
        serCusId: "",
        saleId: "", //销售id
        billType: "",
        costName: "",
        count: "",
        unitPrice: "",
        currency: "",
        totalCost: "",
        remain: "",
        accountDate: "",
        remark: ""
      },
      customerInfo: {
        customerName: "", //客户名称
        countryName: "", //国家名
        shipmentPortCode: "", //启运港编码
        destinationPortCode: "", //目的港编码
        countryName: "", //国家名
        airlineCode: "" //航空公司
      },
      isNotOptions: {
        1: "是",
        0: "否"
      },
      currencySource: {}, //币种
      costNameSource: {}, //费用名称
      customerMap: {}, //客户
      cabinetOptions: {}, //柜型
      receivableData: [], //应收表格数据
      addressesData: [] //提货地址数据
    };
  },
  mounted() {
    this.initPageData();
  },
  methods: {
    copyWaybillByNo() {
      this.waybillDialogVisible = true;
    },
    copyWaybillNoConfirm() {
      var param = {};
      param.waybillNo = this.copyWaybillNo;
      ajax("fetchWaybillByNo", param).then(res => {
        if (res.code == 200) {
          this.waybillInfo = res.data;
          this.$message.success("新增地址成功");
          this.waybillDialogVisible = false;
          this.waybillInfo.customerId = this.customerMap[
            this.waybillInfo.customerId
          ];
          this.waybillInfo.waybillNo = "";
          if (res.data.shippingWay.indexOf("FCL")> -1) {
            this.waybillInfo.shippingWay="FCL";
          }
          if (res.data.shippingWay.indexOf("LCL")> -1) {
            this.waybillInfo.shippingWay="LCL";
          }
          this.waybillInfo.isCustomerDeclaration =
            this.waybillInfo.isCustomerDeclaration + "";
            if (res.data2) {
              this.waybillInfo.boxCount = res.data2.boxCount;
              this.waybillInfo.boxType = res.data2.boxType;
            }
          this.changeCustomer();
        }
      });
    },
    remoteMethod(query) {
      //客户远程搜索
      if (query !== "") {
        //输入模糊查询时
        this.loading = true;
        this.loading = false;
        this.customerInfo.customerName = query;
        ajax("customerReceivables", this.customerInfo).then(res => {
          this.customerIds = this.customerIds = res;
        });
      } else {
        this.customerIds = [];
      }
    },
    selectAddress(index, k) {
      for (const i of this.addressesData) {
        for (const v of i) {
          v.defaultValue = 0;
        }
      }
      this.addressesData[index][k].defaultValue = 1;
    },
    async changeCustomer() {
      //查询收货地址
      this.customerPickupAddress.id = this.waybillInfo.customerId;
      let res = await ajax(
        "getImporterAndPickupAddr",
        this.customerPickupAddress
      );
      console.log(res);
      if (res.customerPickupAddresses.length !== 0) {
        this.addressesData.push(res.customerPickupAddresses);
        // console.log(this.addressesData);
        this.showAddress = true;
      }
      if (res.customerImporterMap.length !== 0) {
        this.customerImporterIds = res.customerImporterMap; //客户进口商信息
      }
    },
    changeData(scope) {
      if (scope.row.count && scope.row.unitPrice) {
        this.$set(
          scope.row,
          "totalCost",
          (scope.row.count * scope.row.unitPrice * 1000) / 1000
        );
        this.$set(
          scope.row,
          "remain",
          (scope.row.count * scope.row.unitPrice * 1000) / 1000
        );
      }
    },
    balanceDetailSave(value) {
      this.$refs[value].validate(valid => {
        if (valid) {
          let data = {};
          data["serCusId"] = this.receivableList.serCusId; //公司
          data["costName"] = this.receivableList.costName; //费用名称
          data["unitPrice"] = this.receivableList.unitPrice;
          data["count"] = this.receivableList.count;
          data["currency"] = this.receivableList.currency;
          data["totalCost"] =
            this.receivableList.unitPrice * this.receivableList.count;
          data["remain"] =
            this.receivableList.unitPrice * this.receivableList.count;
          data["accountDate"] = this.receivableList.accountDate;
          data["remark"] = this.receivableList.remark;
          this.receivableData.push(data);
          this.customerReceivables = false;
          console.log(this.receivableData);
        } else {
          return false;
        }
      });
    },
    editReceive() {
      this.customerReceivables = true;
      this.receivableList = {};
    },
    editReceiveBySale(scope) {
      let data = {};
      // console.log(scope.row.customerId);
      data["serCusId"] = scope.row.serCusId; //公司
      data["accountDate"] = scope.row.accountDate;
      this.receivableData.push(data);
    },
    delData(scope) {
      let index = scope.$index;
      this.receivableData.splice(index, 1);
    },
    serviceShow() {
      //展示进口商信息
      this.flag = true;
      this.importerShow = false;
    },
    importerHide() {
      //隐藏进口商信息
      this.flag = false;
      this.importerShow = true;
    },
    pickUpGoodsShow() {
      this.pickUpGoods = true;
      this.estimatedDeli = false;
    },
    estimatedDeliShow() {
      this.pickUpGoods = false;
      this.estimatedDeli = true;
    },
    customerPickupShow() {
      this.customerPickup = false;
    },
    customerPickupHide() {
      //隐藏进口商信息
      this.customerPickup = true;
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleChange(val) {
      if (!val) return;
      this.customerPickupAddress.state = val[0];
      this.customerPickupAddress.city = val[1];
      this.customerPickupAddress.area = val[2];
      this.customerPickupAddress.street = val[3];
    },
    initPageData() {
      this.stateIds = getPcas(); //省份
      ajax("initPageData", {}).then(
        res => {
          console.log(res);
           this.customerMap = res.customerMap; //客户-数据太多太卡了，直接远程搜索//客户-数据太多太卡了，直接远程搜索
          this.countryIds = res.countryMap; //国家
          // this.airlineIds = res.airlineCodeMap; //航空公司
          this.shipownerIds = res.shipownerMap; //船公司
          this.configPortMap = res.configPortMap; //港口信息
          // this.customerImporterIds = res.customerImporterMap; //选择进口商信息
          // this.shippingWayIds = res.channelTypes; //物流方法
          this.currencySource = res.currencySource; //币种
          this.costNameSource = res.costNameSource; //费用名称
          this.cabinetOptions = res.cabinetTypeMap; //柜型
        },
        error => {
          console.log(error);
        }
      );
    },
    saveCustomerPickupAddress() {
      if (!this.waybillInfo.customerId) {
        this.$message.error("请选择客户");
        return;
      }
      this.customerPickupAddress.cuser = this.waybillInfo.customerId;
      //新增客户收货地址
      ajax("saveCustomerPickupAddress", this.customerPickupAddress).then(
        res => {
          console.log(res);
          if (res.code != 200) {
            this.$message.error("新增地址失败");
          } else {
            this.$message.success("新增地址成功");
            this.columns = res.data;
            console.log("this.columns", this.columns);
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    waybillInfoSave(formName) {
      //保存运单信息
      if (!this.waybillInfo.customerId) {
        this.$message.error("请输入客户");
        return;
      } else if (!this.waybillInfo.countryId) {
        this.$message.error("请选择国家");
        return;
      } else if (!this.waybillInfo.shipmentPort) {
        this.$message.error("请选择起运港");
        return;
      } else if (!this.waybillInfo.destinationPort) {
        this.$message.error("请选择目的港");
        return;
      } else if (!this.waybillInfo.estimatedDepartureTime) {
        this.$message.error("请选择预计离岗时间");
        return;
      } else if (!this.waybillInfo.estimatedArrivalTime) {
        this.$message.error("请选择预计到岗时间");
        return;
      } else if (!this.waybillInfo.shipOrAirlineCompany) {
        this.$message.error("请选择船公司");
        return;
      } else if (!this.waybillInfo.customerActualWeight) {
        this.$message.error("请填写重量");
        return;
      } else if (!this.waybillInfo.customerVolume) {
        this.$message.error("请填写体积");
        return;
      } else if (!this.waybillInfo.customerChargedWeight) {
        this.$message.error("请填写计费重");
        return;
      } else if (!this.waybillInfo.customerTotalPackages) {
        this.$message.error("请填写件数");
        return;
      } else if (!this.waybillInfo.isCustomerDeclaration) {
        this.$message.error("请选择是否报关");
        return;
      } else if (!this.waybillInfo.nameDescription) {
        this.$message.error("请填写品名");
        return;
      }
      // if (!this.waybillInfo.isBuyInsurance) {
      //       this.$message.warning('默认不购买保险！')
      // } 
      if (this.waybillInfo.isBuyInsurance && this.waybillInfo.isBuyInsurance==1) {
          if (!this.waybillInfo.totalPurchasingPrice) {
              this.$message.error('购买保险请填写采购总价！')
              return
          }
          if (!this.waybillInfo.nameDescription) {
              this.$message.error('购买保险请填写品名！')
              return
          }
        }     
       if (!this.waybillInfo.status) {
        this.waybillInfo["status"] = 20;
      }
      // this.waybillInfo["receivableList"] = this.receivableData;
      this.waybillInfo.receivableList = this.receivableData;
      console.log(this.waybillInfo);
      ajax("saveG2GAirWaybill", this.waybillInfo).then(
        res => {
          console.log(res);
          if (res.code == 200) {
            this.$message.success("创建运单成功");
            setTimeout(function() {
              window.open(`#/main/waybill__seafreightlist__list`);
              location.reload();
            }, 2000);
          } else {
            this.$message.error(res.message);
          }
        },
        error => {
          console.log(error);
        }
      );
    }
  }
};
</script>

<style scoped lang="scss">
.el-card {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 10px;
}

.maxheight {
  display: none;
}
.address-item {
  border: 1px solid #ccc;
}

.address-active {
  position: relative;
  border: 1px solid #9dc9f6;
}
.address-active::after {
  content: "";
  background: url("../../../../../assets/images/choose.jpg");
  position: absolute;
  background-size: 18px 19px;
  top: 50%;
  right: 2%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 19px;
}
</style>
